<!--
 * @Description: 发送socket的端口组件
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2020-11-02 17:15:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-13 15:49:04
-->
<template>
  <div class="dialog-for-msgTemplate">
    <fks-dialog
      v-if="Visible"
      :visible.sync="Visible"
      width="960px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
    >
      <template slot="title">
        <i class="fks-icon-edit" />
        <span>{{ LANG.TEST }}</span>
      </template>
      <fks-form
        ref="form"
        v-loading="loading"
        :model="form"
      >
        <fks-form-item :label="LANG.TEMPLATE_ID">
          <fks-input
            v-model="templateId"
            disabled
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.MSG_SEND_TYPE"
          prop="supportedMsgSendTypes"
        >
          <fks-select
            v-model="templateInfo.supportedMsgSendTypes"
            style="width: 100%;"
            disabled
          >
            <fks-option
              v-for="item in msgSendTypeList"
              :key="item.code"
              :value="item.code"
              :label="item[$lang]"
            />
          </fks-select>
        </fks-form-item>
        <fks-form-item :label="LANG.RECEIVE_USER">
          <fks-input
            v-model="form.toUsers"
            maxlength="50"
            :placeholder="receiverTip"
          />
        </fks-form-item>
        <fks-form-item
          v-if="templateInfo.supportedMsgSendTypes === MSG"
          :label="LANG.CLIENTID"
        >
          <fks-input
            v-model="form.toClientId"
            maxlength="50"
            :placeholder="LANG.CLIENT_ID_TIP"
          />
        </fks-form-item>
        <fks-form-item
          v-if="templateInfo.supportedMsgSendTypes === MSG"
          :label="LANG.MSG_TYPE"
        >
          <fks-input
            v-model="form.msgType"
            maxlength="50"
            :placeholder="LANG.MSG_TYPE_TIP"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.TEST_PARAMS">
          <fks-input
            v-model="form.msgTemplateParam"
            type="textarea"
            :rows="10"
            maxlength="255"
            :placeholder="LANG.TEST_PARAMS_TIP"
          />
        </fks-form-item>

        <fks-form-item class="tips">
          <div class="tips">
            {{ sendTip }}
          </div>
        </fks-form-item>
      </fks-form>

      <template slot="footer">
        <fks-button
          type="primary"
          icon="fks-icon-check"
          @click="onSubmit"
        >
          {{ LANG.SEND }}
        </fks-button>
      </template>
    </fks-dialog>
  </div>
</template>


 <script>
import { postMsg } from './api'
import { USER } from '@/store/State/stateTypes'
import { getMsgTemplateById } from '../../api'
import { ENUM } from '@/store/State/stateTypes'

export default {
  name: 'MsgPost',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    templateId: {
      type: String
    }
  },
  data() {
    return {
      MSG: '0',
      SMS: '1',
      EMAIL: '2',

      Visible: false,
      loading: true,
      templateInfo: {},
      form: {},
      userName: 'chen_yt', //测试用，正式使用采用传入
      msgTemplateParam: { text: '测试toUser', puilisher: '没有人' } //k-v值对
    }
  },
  computed: {
    msgSendTypeList() {
      return this.$store.state[ENUM].msgSendType || []
    },
    sendTip() {
      if (this.templateInfo.supportedMsgSendTypes === this.SMS)
        return this.LANG.TEST_TIP_SMS
      if (this.templateInfo.supportedMsgSendTypes === this.EMAIL)
        return this.LANG.TEST_TIP_EMAIL
      return this.LANG.TEST_TIP_MSG
    },
    receiverTip() {
      if (this.templateInfo.supportedMsgSendTypes === this.SMS)
        return this.LANG.RECEIVE_USER_TIP_SMS
      if (this.templateInfo.supportedMsgSendTypes === this.EMAIL)
        return this.LANG.RECEIVE_USER_TIP_EMAIL
      return this.LANG.RECEIVE_USER_TIP_MSG
    },
    msgType() {
      //测试用类型，不会存入数据库
      return 400
    },
    toClientId() {
      return this.USER.clientId
    },
    USER() {
      return this.$store.state[USER]
    },
    defaultUser() {
      if (this.templateInfo.supportedMsgSendTypes === this.SMS)
        return this.USER.phone
      if (this.templateInfo.supportedMsgSendTypes === this.EMAIL)
        return this.USER.email
      return this.USER.userName
    }
  },
  watch: {
    visible(val) {
      this.Visible = val
      if (val) {
        this.resetData()
        this.initData()
      }
    }
  },
  mounted() {},
  created() {},
  beforeDestroy() {},
  methods: {
    resetData() {
      this.loading = true
      this.templateInfo = {}
      this.form = {
        toUsers: ''
      }
    },

    initData() {
      getMsgTemplateById(this.templateId)
        .then((res) => {
          this.loading = false
          if (res.status) {
            this.templateInfo = res.data
            this.$set(this.form, 'toUsers', this.defaultUser)
          } else {
            this.close()
          }
        })
        .catch(() => {
          this.loading = false
        })
    },

    postMsg() {
      let data = {
        fromClientId: 'fawkes',
        fromTenantId: 100000,
        fromUserFullname: this.USER.userFullname,
        fromUserId: this.USER.id,
        fromUserName: this.USER.userName,

        msgSendType: this.templateInfo.supportedMsgSendTypes,
        msgTemplateParam: this.form.msgTemplateParam,
        msgTemplateId: this.templateId,
        msgType: this.form.msgType ?? this.msgType,
        toUsers: this.form.toUsers,
        toClientId: this.form.toClientId ? this.form.toClientId : 'fawkes'
      }
      postMsg(data).then((res) => {
        if (res.status) {
          this.$message.success(this.LANG.SEND_SUCCESS)
        }
      })
    },

    onSubmit() {
      this.postMsg()
    },

    close() {
      this.Visible = false
      this.$emit('close')
      this.resetData()
    }
  }
}
</script>

<style scoped lang="scss">
.tips {
  font-size: 14px;
  color: #999;
}

.tips ::v-deep .fks-form-item__content {
  line-height: 16px !important;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>